<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>注册页面</title>
    <link rel="stylesheet" type="text/css" href="css/register.css">
    <script src="js/vue.js"></script>
    <script src="js/cdn.axios.js"></script>
</head>
<body>
<div id="root">
    <div class="container">
        <h2>注册页面</h2>
        <form>
            <div class="form-group">
                <label for="username">用户名</label>
                <input type="text" id="username" name="username" v-model="userName">
            </div>
            <div class="form-group">
                <label for="password">密码</label>
                <input type="password" id="password" name="password" v-model="password">
            </div>
            <div class="form-group">
                <span>性别</span>
                <select name="gender" id="gender" v-model="gender">
                    <option value="男">男</option>
                    <option value="女">女</option>
                </select>
            </div>
            <div class="form-group">
                <label for="age" >年龄</label>
                <input type="text" id="age" name="age" v-model="age">
            </div>
            <div class="form-group">
                <label for="telephone">手机号码</label>
                <input type="password" id="telephone" name="telephone" v-model="telephone">
            </div>
            <div class="form-group">
                <label for="e-mail">邮箱</label>
                <input type="text" id="e-mail" name="e-mail" v-model="email">
            </div>
            <div class="form-group">
                <label for="address">地址</label>
                <input type="text" id="address" name="address" v-model="address">
            </div>
            <div class="form-group">
                <span>是否领养过</span>
                <select name="adopt" id="adopt" v-model="experience">
                    <option value="0">是</option>
                    <option value="1">否</option>
                </select>
            </div>
        </form>
        <div class="text-center">
            <button class="btn" @click="register">注册</button>
        </div>
    </div>
</div>
<script>
    const {createApp} = Vue;
    createApp({
        data() {
            return {
                userName:"",
                password:"",
                gender:"",
                age:"",
                telephone:"",
                email:"",
                address:"",
                experience:"",
            }
        },
        methods:{
            register() {
                console.log(this.userName);
                axios({
                    method:"post",
                    url:"/user/newuser",
                    contentType: 'application/json',
                    data:{
                        "nickName":this.userName,
                        "secret":this.password,
                        "gender":this.gender,
                        "age":this.age,
                        "phoneNum":this.telephone,
                        "email":this.email,
                        "address":this.address,
                        "experience":this.experience,
                    }
                }).then(function (res) {
                    if (res.data.code===200) {
                        alert("注册成功");
                        window.location.href='login.html';
                    } else {
                        alert("注册失败")
                    }
                })
            },
        }
    }).mount('#root')
</script>
</body>
</html>